<template>
  <div class="content-container">
    <el-row class="row">
      <el-col :span="4">
        <member-menu active="favorites"/>
      </el-col>
      <el-col :span="20">
        <div class="favorites-container">
          <div class="favorites-empty" v-if="!itemList || !itemList.length">
            暂无收藏
          </div>
          <div class="favorites-list" v-else>
            <div class="favorites-card" v-for="item in itemList" :key="item.id">
              <router-link target="_blank" :to="{path: '/learn/detail', query: {id: item.id}}"  class="favorites-cover">
                <img :src="item.image" :alt="item.name" class="">
                <div class="tag-wrapper"></div>
              </router-link>
              <div class="favorites-meta">
                <div class="meta-title">
                  <router-link target="_blank" :to="{path: '/learn/detail', query: {id: item.id}}"  class="name ellipsis">
                    {{item.name}}
                  </router-link>
                </div>
                <div class="meta-status">
                  <div>
                    <span class="pubdate is-success">{{item.createTime}}</span>
                  </div>
                </div>
                <div class="meta-view">
                  <el-button @click="delFavorite(item.id)">取消收藏</el-button>
                </div>
                <div class="meta-footer">
                  <div title="播放" class="view-stat">
                    <i class="el-icon-video-play"> 播放</i>
                    <span class="icon-text click-text">{{item.learnNum || 0}}</span>
                  </div>
                  <div title="点赞" class="view-stat">
                    <i class="el-icon-thumb"> 点赞</i>
                    <span class="icon-text">{{item.likeNum || 0}}</span>
                  </div>
                  <div title="收藏" class="view-stat">
                    <i class="el-icon-star-off"> 收藏</i>
                    <span class="icon-text">{{item.favoriteNum || 0}}</span>
                  </div>
                  <div title="评论" class="view-stat">
                    <i class="el-icon-chat-line-round"> 评论</i>
                    <span class="icon-text">{{item.commentNum || 0}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="page-bar">
          <page @size-change="sizeChange" @current-change="currentChange" :current-page="param.current" :page-size="param.size" :total="total"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {ref} from "vue"
  import memberMenu from "../menu/index"
  import {getFavoriteLessonList} from "../../../api/learn/lesson"
  import {deleteFavorite} from "../../../api/comment/favorite"
  import {success} from "../../../util/tipsUtils";
  import Page from "../../../components/Page/index";
  export default {
    name: "memberFavorite",
    components: {
      Page,
      memberMenu
    },
    setup() {
      const param = ref({
        current: 1,
        size: 20
      })
      const total = ref(0)
      const itemList = ref([])
      const load = () => {
        getFavoriteLessonList(param.value, res => {
          itemList.value = res.list
          total.value = res.total
        })
      }
      load()
      const sizeChange = (val) => {
        param.value.size = val;
        load();
        console.log(`每页 ${val} 条`);
      }
      const currentChange = (val) => {
        param.value.current = val;
        load();
        console.log(`当前页: ${val}`);
      }
      const delFavorite = (id) => {
        deleteFavorite({topicId: id, topicType: "lesson"}, () => {
          success("取消收藏成功")
          load()
        })
      }
      return {
        param,
        total,
        itemList,
        sizeChange,
        currentChange,
        delFavorite
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content-container {
    background: #f5f5f5;
  }
  .favorites-empty {
    position: relative;
    flex-grow: 1;
    height: 100%;
    text-align: center;
    color: #999;
    line-height: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10% 0;
  }
  .el-icon-chat-line-square {
    font-size: 100px;
  }
  .favorites-container {
    background-color: #FFFFFF;
    margin: 20px;
  }
  .favorites-list {
    padding: 0 20px;
    .favorites-card {
      border-bottom: 1px solid #e7e7e7;
      position: relative;
      width: 100%;
      min-height: 96px;
      border-radius: 4px;
      background: #fff;
      padding: 24px 0;
      margin-bottom: 0;
      -webkit-box-sizing: inherit;
      box-sizing: inherit;
      .favorites-cover {
        position: relative;
        float: left;
        border-radius: 4px;
        overflow: hidden;
        width: 154px;
        height: 96px;
        margin-right: 24px;
        -webkit-box-sizing: inherit;
        box-sizing: inherit;
        img {
          width: 100%;
          height: 100%;
          border-radius: 4px;
          -webkit-box-sizing: inherit;
          box-sizing: inherit;
          border-style: none;
        }
        .duration {
          position: absolute;
          bottom: 0;
          right: 0;
          height: 20px;
          line-height: 20px;
          padding: 0 4px;
          color: #fff;
          background: rgba(0,0,0,.5);
          border-radius: 4px 0 4px 0;
          -webkit-box-sizing: inherit;
          box-sizing: inherit;
        }
        .tag {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: reverse;
          -webkit-flex-direction: row-reverse;
          -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
          top: 4px;
          right: 4px;
          position: absolute;
          -webkit-box-sizing: inherit;
          box-sizing: inherit;
        }
      }
      .meta-title {
        height: 24px;
        line-height: 24px;
        -webkit-box-sizing: inherit;
        box-sizing: inherit;
        a {
          text-decoration: none;
          cursor: pointer;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
          max-width: 420px;
          font-size: 16px;
          color: #212121;
          line-height: 20px;
          vertical-align: middle;
        }
      }
      .meta-status {
        padding: 16px 0 20px 0;
        font-size: 14px;
        color: #505050;
        line-height: 16px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-sizing: inherit;
        box-sizing: inherit;
        .pubdate {
          display: inline-block;
          font-weight: 400;
          vertical-align: middle;
          font-size: 14px;
          line-height: 16px;
          padding-right: 24px;
          -webkit-box-sizing: inherit;
          box-sizing: inherit;
        }
      }
      .meta-view {
        position: absolute;
        top: 50%;
        margin-top: -16px;
        color: #99a2aa;
        right: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-sizing: inherit;
        box-sizing: inherit;
        .bili-btn {
          display: inline-block;
          text-align: center;
          cursor: pointer;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          width: 84px;
          height: 32px;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
          align-items: center;
          border: 1px solid #e7e7e7;
          border-radius: 2px;
          font-size: 14px;
          color: #505050;
          line-height: 18px;
          padding: 0;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          justify-content: center;
          margin-right: 12px;
          -webkit-box-sizing: inherit;
          box-sizing: inherit;
        }
      }
      .meta-footer {
        position: relative;
        font-size: 16px;
        -webkit-box-sizing: inherit;
        box-sizing: inherit;
        .view-stat {
          isplay: inline-block;
          float: left;
          color: #99a2aa;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
          align-items: center;
          margin-right: 25px;
          -webkit-box-sizing: inherit;
          box-sizing: inherit;
          .icon-text {
            vertical-align: top;
            margin-left: 5px;
            -webkit-box-sizing: inherit;
            box-sizing: inherit;
          }
        }
      }
      .favorites-meta {
        float: left;
        -webkit-box-sizing: inherit;
        box-sizing: inherit;

      }
    }
    .favorites-card:last-child {
      border-bottom: 0;
    }
  }
  .page-bar {
    text-align: center;
    margin: 20px 0;
  }
  a:hover {
    color: #0d9bff!important;
  }
</style>
